import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  Button,
  Input,
  Label,
  Text,
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  DialogClose,
  Spinner,
} from 'packages/ui-shared/src/atoms';
import {
  getDataOneuser,
  AuditLogService,
  AuditAction,
} from '@packages/shared';
import SessionManagerAdapter, { SessionInfo } from '../auth/SessionManagerAdapter';

// 学校管理系统登录组件
export default function Login() {
  const navigate = useNavigate();
  const [form, setForm] = useState({ phone: '', pwd: '' });
  const [msg, setMsg] = useState('');
  const [role, setRole] = useState('');
  const [loading, setLoading] = useState(false);
  const [currentSession, setCurrentSession] = useState<SessionInfo | null>(null);

  // MFA相关状态
  const [showMFA, setShowMFA] = useState(false);
  const [mfaCode, setMfaCode] = useState('');

  // 密码重置相关状态
  const [showResetPassword, setShowResetPassword] = useState(false);
  const [resetForm, setResetForm] = useState({
    phone: '',
    newPassword: '',
    confirmPassword: '',
  });
  const [resetStep, setResetStep] = useState(1); // 1: 输入手机号, 2: 验证码验证, 3: 设置新密码
  const [resetCode, setResetCode] = useState('');

  // 验证码相关
  const [verificationCode, setVerificationCode] = useState('');
  const [countdown, setCountdown] = useState(0);
  const [Users, setUsers] = useState<any>({});

  // 会话管理相关
  const [showSessionInfo, setShowSessionInfo] = useState(false);

  // 组件挂载时检查现有会话
  useEffect(() => {
    const session = SessionManagerAdapter.getCurrentSession();
    if (session) {
      setCurrentSession(session);
      // 如果会话有效且不需要重新认证，直接跳转
      if (SessionManagerAdapter.isSessionValid() && !SessionManagerAdapter.needsReauthentication()) {
        navigate('/app');
      }
    }

    // 启动自动登出检查
    SessionManagerAdapter.startAutoLogoutCheck();
  }, [navigate]);
  
  // 生成验证码
  const generateCode = () => {
    return Math.floor(100000 + Math.random() * 900000).toString();
  };

  // 发送验证码
  const sendVerificationCode = (phone: string, type: 'login' | 'reset') => {
    const code = generateCode();
    setVerificationCode(code);
    setCountdown(60);

    // 模拟发送验证码
    console.log(`发送验证码到 ${phone}: ${code}`);

    // 倒计时
    const timer = setInterval(() => {
      setCountdown((prev) => {
        if (prev <= 1) {
          clearInterval(timer);
          return 0;
        }
        return prev - 1;
      });
    }, 1000);

    return code;
  };

  // MFA验证
  const handleMFAVerification = async () => {
    if (mfaCode === verificationCode) {
      setMsg('MFA验证成功，正在登录...');

      // 记录MFA验证成功的审计日志
      await AuditLogService.log(
        Users.id,
        Users.name,
        Users.role,
        AuditAction.MFA_VERIFY,
        'MFA验证成功',
        true,
        { phone: form.phone }
      );

      // 创建会话
      const session = await SessionManagerAdapter.createSession(
        Users.id,
        Users.name,
        Users.role,
        true, // MFA已验证
      );

      setCurrentSession(session);

      setTimeout(() => {
        sessionStorage.setItem('role', role);
        sessionStorage.setItem('user', JSON.stringify(Users));
        setShowMFA(false);
        setMfaCode('');
        navigate('/app');
      }, 1000);
    } else {
      setMsg('验证码错误，请重试');

      // 记录MFA验证失败的审计日志
      await AuditLogService.log(
        Users.id || 0,
        Users.name || 'Unknown',
        Users.role || 'guest',
        AuditAction.MFA_VERIFY,
        'MFA验证失败',
        false,
        { phone: form.phone, error: '验证码错误' }
      );
    }
  };

  // 密码重置
  const handlePasswordReset = async () => {
    if (resetForm.newPassword !== resetForm.confirmPassword) {
      setMsg('两次输入的密码不一致');
      return;
    }

    if (resetForm.newPassword.length < 6) {
      setMsg('密码长度至少6位');
      return;
    }

    // 记录密码重置成功的审计日志
    await AuditLogService.log(
      0, // 重置密码时可能没有用户ID
      'Unknown',
      'guest',
      AuditAction.PASSWORD_RESET,
      '密码重置成功',
      true,
      { phone: resetForm.phone }
    );

    setMsg('密码重置成功，请重新登录');
    setShowResetPassword(false);
    setResetForm({ phone: '', newPassword: '', confirmPassword: '' });
    setResetStep(1);
  };

  // 重新发送验证码
  const resendCode = () => {
    if (countdown === 0) {
      sendVerificationCode(form.phone, 'login');
    }
  };

  const fakeLogin = async (phone: string, pwd: string) => {
    try {
      // 1. 首先尝试从localStorage中获取注册的用户
      const registeredUsers = localStorage.getItem('students');
      if (registeredUsers) {
        const users = JSON.parse(registeredUsers);
        const matchedUser = users.find((user: any) => user.phone === phone && user.pwd === pwd);
        if (matchedUser) {
          setRole(matchedUser.role);
          setUsers(matchedUser);
          return { success: true, user: matchedUser };
        }
      }
      
      // 2. 如果localStorage中没有匹配的用户，再尝试从mock-data中获取
      const res: any = await getDataOneuser(phone);
      if (res && res.length > 0) {
        const user = res[0];
        setRole(user.role);
        setUsers(user);
        if (user.phone === phone && user.pwd === pwd) {
          return { success: true, user };
        }
      }
      
      // 3. 如果都没有匹配的用户，返回失败
      return { success: false, message: '账号或密码错误' };
    } catch (error) {
      console.error('登录错误:', error);
      return { success: false, message: '登录失败，请重试' };
    }
  };

  const handleLogin = async () => {
    if (!form.phone || !form.pwd) {
      setMsg('请输入手机号和密码');
      return;
    }

    setLoading(true);
    setMsg('');

    try {
      const res = await fakeLogin(form.phone, form.pwd);
      if (res.success) {
        // 记录登录成功的审计日志
        await AuditLogService.log(
          res.user.id,
          res.user.name,
          res.user.role,
          AuditAction.LOGIN,
          '用户登录成功',
          true,
          { phone: form.phone }
        );

        // 检查是否需要MFA验证（这里模拟管理员需要MFA）
        if (res.user.role === 'admin') {
          setShowMFA(true);
          sendVerificationCode(form.phone, 'login');
        } else {
          setMsg('登录成功');
          
          // 为非管理员用户创建会话
          const session = await SessionManagerAdapter.createSession(
            res.user.id,
            res.user.name,
            res.user.role,
            false // 非管理员不需要MFA
          );
          
          setCurrentSession(session);
          sessionStorage.setItem('role', res.user.role);
          sessionStorage.setItem('user', JSON.stringify(res.user));
          navigate('/app');
        }
      } else {
        // 记录登录失败的审计日志
        await AuditLogService.log(
          0,
          'Unknown',
          'guest',
          AuditAction.LOGIN_FAILED,
          '登录失败',
          false,
          { phone: form.phone, error: res.message || '账号或密码错误' }
        );
        setMsg('账号或密码错误');
      }
    } catch (error) {
      // 记录登录异常的审计日志
      await AuditLogService.log(
        0,
        'Unknown',
        'guest',
        AuditAction.LOGIN_FAILED,
        '登录异常',
        false,
        { phone: form.phone, error: '系统异常' }
      );
      setMsg('登录失败，请重试');
    }

    setLoading(false);
    setTimeout(() => setMsg(''), 3000);
  };

  // 登出功能
  const handleLogout = async () => {
    await SessionManagerAdapter.clearSession();
    setCurrentSession(null);
    setForm({ phone: '', pwd: '' });
    setMsg('已安全登出');
    setTimeout(() => setMsg(''), 3000);
  };

  // 延长会话
  const handleExtendSession = async () => {
    const success = await SessionManagerAdapter.extendSession();
    if (success) {
      setMsg('会话已延长');
      setTimeout(() => setMsg(''), 3000);
    }
  };

  return (
    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-slate-50 to-blue-50 font-sans">
      {/* 装饰性背景元素 - 学校风格 */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-40 -left-40 w-80 h-80 bg-blue-700 rounded-full opacity-5 blur-3xl"></div>
        <div className="absolute top-1/3 -right-40 w-80 h-80 bg-indigo-700 rounded-full opacity-5 blur-3xl"></div>
        <div className="absolute bottom-0 left-1/3 w-80 h-80 bg-slate-700 rounded-full opacity-5 blur-3xl"></div>
      </div>
      
      {/* 登录卡片 - 学校管理系统风格 */}
      <div className="relative w-full max-w-md p-8 bg-white rounded-2xl shadow-lg border border-gray-200 overflow-hidden z-10 transform transition-all duration-500 hover:shadow-xl">
        {/* 卡片顶部装饰条 - 深蓝色主题 */}
        <div className="absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r from-blue-700 via-indigo-700 to-blue-900"></div>
        
        {/* 卡片内容 */}
        <div className="pt-8 space-y-8">
          <div className="text-center space-y-4">
            {/* 品牌图标 - 学校风格 */}
            <div className="w-20 h-20 mx-auto mb-4 bg-gradient-to-br from-blue-800 to-indigo-800 rounded-xl flex items-center justify-center shadow-md">
              <Text className="text-white text-3xl font-bold">校</Text>
            </div>
            
            {/* 标题与副标题 */}
            <Text className="text-2xl font-bold text-gray-900 tracking-tight">学校管理系统</Text>
            <Text className="text-gray-600 max-w-xs mx-auto">请输入您的账号信息以安全登录系统</Text>
            
            {/* 会话信息显示 */}
            {currentSession && (
              <div className="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg shadow-sm transition-all duration-200 hover:bg-blue-100">
                <Text className="text-sm font-medium text-blue-800">
                  当前会话: {currentSession.userName} ({currentSession.userRole})
                </Text>
                <div className="mt-3 flex justify-center space-x-3">
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => setShowSessionInfo(true)}
                    className="text-xs px-3 py-1 bg-white text-blue-700 hover:bg-blue-50 transition-colors"
                  >
                    会话详情
                  </Button>
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={handleLogout}
                    className="text-xs px-3 py-1 bg-white text-red-600 hover:bg-red-50 transition-colors"
                  >
                    登出
                  </Button>
                </div>
              </div>
            )}
          </div>

          <div className="space-y-6">
            {!currentSession ? (
              <>
                {/* 手机号输入 */}
                <div className="space-y-2">
                  <Label
                    htmlFor="login-phone"
                    className="block text-sm font-medium text-gray-700"
                  >
                    手机号
                  </Label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
                      <Text>📞</Text>
                    </div>
                    <Input
                      id="login-phone"
                      name="phone"
                      type="tel"
                      value={form.phone}
                      onChange={(e) =>
                        setForm((prev) => ({ ...prev, phone: e.target.value }))
                      }
                      placeholder="请输入手机号"
                      className="pl-10 h-12 w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-700 focus:border-blue-700 transition-all outline-none"
                    />
                  </div>
                </div>

                {/* 密码输入 */}
                <div className="space-y-2">
                  <Label
                    htmlFor="login-password"
                    className="block text-sm font-medium text-gray-700"
                  >
                    密码
                  </Label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
                      <Text>🔒</Text>
                    </div>
                    <Input
                      id="login-password"
                      name="pwd"
                      type="password"
                      value={form.pwd}
                      onChange={(e) =>
                        setForm((prev) => ({ ...prev, pwd: e.target.value }))
                      }
                      placeholder="请输入密码"
                      className="pl-10 h-12 w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-700 focus:border-blue-700 transition-all outline-none"
                    />
                  </div>
                </div>

                {/* 消息提示 */}
                {msg && (
                  <div className="p-3 bg-red-50 border border-red-200 rounded-lg shadow-sm animate-fade-in">
                    <Text className="text-red-700 text-sm font-medium">{msg}</Text>
                  </div>
                )}

                {/* 操作按钮 */}
                <div className="space-y-4">
                  <Button
                    variant="primary"
                    onClick={handleLogin}
                    disabled={loading || !form.phone || !form.pwd}
                    className="h-12 w-full px-4 py-2 rounded-lg bg-gradient-to-r from-blue-800 to-indigo-800 text-white font-medium shadow-md hover:from-blue-900 hover:to-indigo-900 transition-all duration-300 focus:ring-4 focus:ring-blue-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    {loading ? (
                      <div className="flex items-center justify-center space-x-2">
                        <Spinner size="sm" className="text-white" />
                        <span>登录中...</span>
                      </div>
                    ) : (
                      '安全登录'
                    )}
                  </Button>

                  <div className="flex flex-col items-center space-y-3">
                    <Button
                      variant="link"
                      onClick={() => setShowResetPassword(true)}
                      className="text-sm text-blue-800 hover:text-blue-900 hover:bg-blue-50 px-3 py-1 rounded-md transition-colors"
                    >
                      忘记密码？
                    </Button>
                    <Button
                      variant="link"
                      onClick={() => navigate('/register')}
                      className="text-sm text-emerald-700 hover:text-emerald-800 hover:bg-emerald-50 px-3 py-1 rounded-md transition-colors"
                    >
                      没有账号？立即注册
                    </Button>
                  </div>
                </div>
              </>
            ) : (
              <div className="text-center space-y-6">
                <div className="p-5 bg-emerald-50 border border-emerald-200 rounded-lg shadow-sm">
                  <div className="inline-flex items-center justify-center w-12 h-12 mb-3 rounded-full bg-emerald-100 text-emerald-600">
                    <Text className="text-xl">✓</Text>
                  </div>
                  <Text className="text-emerald-800 font-medium text-lg">
                    您已登录，正在跳转...
                  </Text>
                  <Text className="text-emerald-600 text-sm mt-1">
                    如果页面没有自动跳转，请点击下方按钮
                  </Text>
                </div>
                
                <div className="space-y-3">
                  <Button
                    variant="primary"
                    onClick={() => navigate('/app')}
                    className="h-12 w-full px-4 py-2 rounded-lg bg-gradient-to-r from-blue-800 to-indigo-800 text-white font-medium shadow-md hover:from-blue-900 hover:to-indigo-900 transition-all duration-200"
                  >
                    进入应用
                  </Button>
                  
                  <Button
                    variant="outline"
                    onClick={handleLogout}
                    className="h-12 w-full px-4 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
                  >
                    重新登录
                  </Button>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>

      {/* MFA验证对话框 - 学校风格 */}
      <Dialog open={showMFA} onOpenChange={setShowMFA}>
        <DialogContent size="sm" className="rounded-2xl border border-gray-200 shadow-xl">
          <DialogHeader>
            <DialogTitle className="text-xl font-bold text-gray-900">多因素认证 (MFA)</DialogTitle>
            <DialogDescription className="text-gray-600">
              为了您的账户安全，请输入发送到您手机的验证码
            </DialogDescription>
          </DialogHeader>

          <div className="py-6 space-y-5">
            <div className="space-y-2">
              <Label htmlFor="mfa-code" className="font-medium text-gray-700">验证码</Label>
              <div className="relative">
                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
                  <Text>🛡️</Text>
                </div>
                <Input
                  id="mfa-code"
                  value={mfaCode}
                  onChange={(e) => setMfaCode(e.target.value)}
                  placeholder="请输入6位验证码"
                  maxLength={6}
                  className="pl-10 h-12 w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-700 focus:border-blue-700 transition-all outline-none"
                />
              </div>
            </div>

            <div className="text-center">
              {countdown > 0 ? (
                <Text className="text-sm text-gray-600 font-medium">
                  验证码已发送，{countdown}秒后可重新发送
                </Text>
              ) : (
                <Button 
                  variant="link" 
                  onClick={resendCode} 
                  className="text-sm text-blue-800 hover:text-blue-900 hover:bg-blue-50 px-3 py-1 rounded-md transition-colors"
                >
                  重新发送验证码
                </Button>
              )}
            </div>

            <div className="text-xs text-gray-500 text-center py-2">
              测试验证码：{verificationCode}
            </div>
          </div>

          <DialogFooter className="space-x-3">
            <DialogClose className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors">
              取消
            </DialogClose>
            <Button
              variant="primary"
              onClick={handleMFAVerification}
              disabled={mfaCode.length !== 6}
              className="px-4 py-2 rounded-lg bg-gradient-to-r from-blue-800 to-indigo-800 text-white hover:from-blue-900 hover:to-indigo-900 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
            >
              验证
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      {/* 密码重置对话框 - 学校风格 */}
      <Dialog open={showResetPassword} onOpenChange={setShowResetPassword} >
        <DialogContent size="md" className="rounded-2xl border border-gray-200 shadow-xl">
          <DialogHeader>
            <DialogTitle className="text-xl font-bold text-gray-900">密码重置</DialogTitle>
            <DialogDescription className="text-gray-600">
              通过手机验证码重置您的密码
            </DialogDescription>
          </DialogHeader>

          <div className="py-6 space-y-5">
            {resetStep === 1 && (
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="reset-phone" className="font-medium text-gray-700">手机号</Label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
                      <Text>📞</Text>
                    </div>
                    <Input
                      id="reset-phone"
                      value={resetForm.phone}
                      onChange={(e) =>
                        setResetForm((prev) => ({ ...prev, phone: e.target.value }))
                      }
                      placeholder="请输入注册时的手机号"
                      className="pl-10 h-12 w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-700 focus:border-blue-700 transition-all outline-none"
                    />
                  </div>
                </div>
                
                <div>
                  <Button
                    variant="primary"
                    onClick={() => {
                      if (resetForm.phone) {
                        sendVerificationCode(resetForm.phone, 'reset');
                        setResetStep(2);
                      }
                    }}
                    disabled={!resetForm.phone}
                    className="w-full h-12 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-800 to-indigo-800 text-white font-medium shadow-md hover:from-blue-900 hover:to-indigo-900 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    发送验证码
                  </Button>
                </div>
              </div>
            )}

            {resetStep === 2 && (
              <div className="space-y-4">
                <div className="space-y-2">
                  <Label htmlFor="reset-code" className="font-medium text-gray-700">验证码</Label>
                  <Label className="text-xs text-gray-500 block mb-1">测试验证码：{verificationCode}</Label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
                      <Text>🛡️</Text>
                    </div>
                    <Input
                      id="reset-code"
                      value={resetCode}
                      onChange={(e) => setResetCode(e.target.value)}
                      placeholder="请输入6位验证码"
                      maxLength={6}
                      className="pl-10 h-12 w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-700 focus:border-blue-700 transition-all outline-none"
                    />
                  </div>
                </div>
                
                <div className="flex space-x-3 pt-2">
                  <Button
                    variant="outline"
                    onClick={() => setResetStep(1)}
                    className="flex-1 h-11 px-4 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
                  >
                    上一步
                  </Button>
                  <Button
                    variant="primary"
                    onClick={() => {
                      if (resetCode === verificationCode) {
                        setResetStep(3);
                      } else {
                        setMsg('验证码错误');
                      }
                    }}
                    disabled={resetCode.length !== 6}
                    className="flex-1 h-11 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-800 to-indigo-800 text-white font-medium shadow-md hover:from-blue-900 hover:to-indigo-900 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    验证
                  </Button>
                </div>
              </div>
            )}

            {resetStep === 3 && (
              <div className="space-y-5">
                <div className="space-y-2">
                  <Label htmlFor="new-password" className="font-medium text-gray-700">新密码</Label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
                      <Text>🔒</Text>
                    </div>
                    <Input
                      id="new-password"
                      type="password"
                      value={resetForm.newPassword}
                      onChange={(e) =>
                        setResetForm((prev) => ({
                          ...prev,
                          newPassword: e.target.value,
                        }))
                      }
                      placeholder="请输入新密码（至少6位）"
                      className="pl-10 h-12 w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-700 focus:border-blue-700 transition-all outline-none"
                    />
                  </div>
                </div>
                
                <div className="space-y-2">
                  <Label htmlFor="confirm-password" className="font-medium text-gray-700">确认密码</Label>
                  <div className="relative">
                    <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-500">
                      <Text>🔒</Text>
                    </div>
                    <Input
                      id="confirm-password"
                      type="password"
                      value={resetForm.confirmPassword}
                      onChange={(e) =>
                        setResetForm((prev) => ({
                          ...prev,
                          confirmPassword: e.target.value,
                        }))
                      }
                      placeholder="请再次输入新密码"
                      className="pl-10 h-12 w-full rounded-lg border-gray-300 focus:ring-2 focus:ring-blue-700 focus:border-blue-700 transition-all outline-none"
                    />
                  </div>
                </div>
                
                <div className="flex space-x-3 pt-2">
                  <Button
                    variant="outline"
                    onClick={() => setResetStep(2)}
                    className="flex-1 h-11 px-4 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
                  >
                    上一步
                  </Button>
                  <Button
                    variant="primary"
                    onClick={handlePasswordReset}
                    disabled={
                      !resetForm.newPassword || !resetForm.confirmPassword
                    }
                    className="flex-1 h-11 px-4 py-2 rounded-lg bg-gradient-to-r from-blue-800 to-indigo-800 text-white font-medium shadow-md hover:from-blue-900 hover:to-indigo-900 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                  >
                    重置密码
                  </Button>
                </div>
              </div>
            )}
          </div>
        </DialogContent>
      </Dialog>

      {/* 会话信息对话框 - 学校风格 */}
      <Dialog open={showSessionInfo} onOpenChange={setShowSessionInfo}>
        <DialogContent size="md" className="rounded-2xl border border-gray-200 shadow-xl">
          <DialogHeader>
            <DialogTitle className="text-xl font-bold text-gray-900">会话信息</DialogTitle>
            <DialogDescription className="text-gray-600">
              当前会话的详细信息
            </DialogDescription>
          </DialogHeader>

          <div className="py-6 space-y-6">
            {currentSession && (
              <div className="space-y-5">
                <div className="grid grid-cols-2 gap-5">
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium text-gray-700 block">用户ID</Label>
                    <Text className="text-sm text-gray-900 font-medium">{currentSession.userId}</Text>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium text-gray-700 block">用户名</Label>
                    <Text className="text-sm text-gray-900 font-medium">{currentSession.userName}</Text>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium text-gray-700 block">用户角色</Label>
                    <Text className="text-sm text-gray-900 font-medium">{currentSession.userRole}</Text>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium text-gray-700 block">MFA状态</Label>
                    <Text className={`text-sm font-medium ${currentSession.mfaVerified ? 'text-emerald-700' : 'text-gray-500'}`}>
                      {currentSession.mfaVerified ? '已验证' : '未验证'}
                    </Text>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium text-gray-700 block">登录时间</Label>
                    <Text className="text-sm text-gray-900">
                      {new Date(currentSession.loginTime).toLocaleString('zh-CN')}
                    </Text>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium text-gray-700 block">最后活动</Label>
                    <Text className="text-sm text-gray-900">
                      {new Date(currentSession.lastActivity).toLocaleString('zh-CN')}
                    </Text>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium text-gray-700 block">IP地址</Label>
                    <Text className="text-sm text-gray-900">{currentSession.ipAddress}</Text>
                  </div>
                  <div className="space-y-1.5">
                    <Label className="text-sm font-medium text-gray-700 block">会话ID</Label>
                    <Text className="text-sm text-gray-900 font-mono text-xs bg-gray-50 px-2 py-1 rounded">
                      {currentSession.sessionId}
                    </Text>
                  </div>
                </div>

                <div className="pt-5 border-t border-gray-200">
                  <div className="flex space-x-3">
                    <Button
                      variant="outline"
                      onClick={handleExtendSession}
                      className="flex-1 h-11 px-4 py-2 rounded-lg border border-gray-300 text-gray-700 font-medium hover:bg-gray-50 transition-colors"
                    >
                      延长会话
                    </Button>
                    <Button
                      variant="outline"
                      onClick={handleLogout}
                      className="flex-1 h-11 px-4 py-2 rounded-lg border border-red-200 text-red-600 font-medium hover:bg-red-50 transition-colors"
                    >
                      安全登出
                    </Button>
                  </div>
                </div>
              </div>
            )}
          </div>

          <DialogFooter>
            <DialogClose className="px-4 py-2 rounded-lg border border-gray-300 text-gray-700 hover:bg-gray-50 transition-colors">
              关闭
            </DialogClose>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}